<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>不同时间作品数</title>

    <script src="echarts.js"></script>
    <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
</head>

<body>
<!-- 为 ECharts 准备一个具备大小的 DOM 容器 -->
<div id="lineChart" style="width: 600px; height: 400px;"></div>

<script>
    // 创建 XMLHttpRequest 对象用于读取 CSV 文件
    const xhr = new XMLHttpRequest();
    xhr.open('GET', '../output/mengBatch3.csv/part-00000-5fe08861-ad5f-4ea0-b449-99a51396ad9e-c000.csv', true);
    xhr.onload = function () {
        if (this.status === 200) {
            const csvData = this.responseText;
            // 解析 CSV 数据，处理可能的空格
            const rows = csvData.split('\n').map(row => row.split(',').map(item => item.trim()));
            const headers = rows[0];
            // 过滤有效数据行（确保4列完整且转化率为有效数字）
            const dataRows = rows.slice(1).filter(row => row.length === 4 && !isNaN(parseFloat(row[3])));

            // 处理数据，提取各来源渠道及对应指标
            const sourceData = [];
            const conversionRates = [];
            const totalUsers = [];
            const listingPageUsers = [];

            dataRows.forEach(row => {
                sourceData.push(row[0]); // 来源渠道
                totalUsers.push(parseInt(row[1]) || 0); // 总用户数
                listingPageUsers.push(parseInt(row[2]) || 0); // 列表页浏览用户数
                conversionRates.push(parseFloat(row[3]).toFixed(2)); // 转化率（保留两位小数）
            });

            // 初始化 ECharts 实例
            const myChart = echarts.init(document.getElementById('lineChart'));

            // 指定图表的配置项和数据
            const option = {
                title: {
                    text: '不同来源渠道用户列表页浏览转化率比较',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: function(params) {
                        const index = params[0].dataIndex;
                        return `${sourceData[index]}<br/>` +
                            `总用户数: ${totalUsers[index]}<br/>` +
                            `列表页浏览用户: ${listingPageUsers[index]}<br/>` +
                            `转化率: ${conversionRates[index]}%`;
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: sourceData,
                    name:'来源渠道', // 来源渠道
                    axisLabel: {
                        rotate: 45, // 旋转标签避免重叠
                        interval: 0 // 显示所有标签
                    }
                },
                yAxis: {
                    type: 'value',
                    name:'列表页转化率', // 列表页转化率
                    axisLabel: {
                        formatter: '{value}%' // 显示百分比符号
                    },
                    min: 0, // 转化率从0开始
                    max: function(value) {
                        // 最大值设为实际最大值的1.2倍，留有余地
                        return Math.ceil(value.max * 1.2);
                    }
                },
                series: [
                    {
                        name: '列表页浏览转化率',
                        type: 'bar',
                        data: conversionRates,
                        barWidth: '60%', // 柱子宽度
                        itemStyle: {
                            // 为不同来源渠道设置差异化颜色
                            color: function(params) {
                                const colorList = [
                                    '#5470c6', '#91cc75', '#fac858', '#ee6666',
                                    '#73c0de', '#3ba272', '#fc8452', '#9a60b4'
                                ];
                                return colorList[params.dataIndex % colorList.length];
                            }
                        },
                        label: {
                            show: true,
                            position: 'top',
                            formatter: '{c}%', // 显示百分比
                            color: '#333',
                            fontSize: 12
                        }
                    }
                ]
            };

            // 使用配置项显示图表
            myChart.setOption(option);

            // 响应窗口大小变化
            window.addEventListener('resize', () => {
                myChart.resize();
            });
        }
    };
    xhr.send();
</script>
</body>
</html>